<template>
  <!-- 百分比设置不知道会不会再次导致卡顿 -->
  <div
    id="echarts_pie"
    style="display: flex; width: 100%; height: 100%; justify-content: center"
  ></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  methods: {
    charts(data1, data2, data3) {
      var mychart = echarts.init(document.getElementById("echarts_pie"));
      var option = {
        title: [
          {
            text: "47",
            x: "center",
            top: "55%",
            textStyle: {
              color: "#FFFFFF",
              fontSize: 12,
              fontWeight: "100",
            },
          },
          {
            text: "总数",
            x: "center",
            y: "center",
            textStyle: {
              fontSize: "16",
              color: "#FFFFFF",
              fontFamily: "DINAlternate-Bold, DINAlternate",
              foontWeight: "300",
            },
          },
        ],
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          left: "left",
          textStyle: {
            color: "#fff",
          },
        },
        // label: {
        //   alignTo: "edge",
        //   formatter: "{b}\n{time|{d} %}",
        //   minMargin: 5,
        //   edgeDistance: 10,
        //   lineHeight: 15,
        //   rich: {
        //     time: {
        //       fontSize: 10,
        //       color: "#999",
        //     },
        //   },
        // },
        series: [
          {
            name: "传感器情况",
            type: "pie",
            radius: ["30%", "60%"],
            label: {
              color: "#fff",
            },
            data: [
              { value: data1, name: "健康" },
              { value: data2, name: "良好" },
              { value: data3, name: "故障" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      mychart.setOption(option);
      // 4. 当我们浏览器缩放的时候，图表也等比例缩放
      window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        mychart.resize();
      });
    },
  },
};
</script>

<style>
</style>